import type { SourceRef } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { JsonLd } from "@/components/entity/json-ld";
import { ExtLink, KeyValueList } from "@/components/entity/kv";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { CoverageBars } from "./coverage-bars";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Page, Section } from "@/components/ui/card";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { ErrorState, OfflineNotice } from "@/components/ui/states";
import { api } from "@/lib/api";
import { fmtDate, fmtInt } from "@/lib/format";
import { ENTITY_TYPE_LABEL, SOURCE_KIND_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { NOT_FOUND_METADATA, absoluteUrl, compactJsonLd, pageMetadata } from "@/lib/seo";

export const revalidate = 300;

type Params = Promise<{ id: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { id } = await params;
  const r = await api.source(id);
  if (!r.ok) return r.status === 404 ? NOT_FOUND_METADATA : { title: "Source" };
  const s = r.data;
  return pageMetadata({
    title: s.name,
    description: `${s.name} (${SOURCE_KIND_LABEL[s.kind].toLowerCase()} source, ${s.domain}) — ${fmtInt(s.documents)} documents, ${fmtInt(s.provenanceRows)} provenance rows across ${fmtInt(s.facilities)} facilities in DataCenterIndex.`,
    path: routes.source(s.id),
  });
}

function humanise(s: string): string {
  return s.replace(/_/g, " ").replace(/^./, (c) => c.toUpperCase());
}

export default async function SourcePage({ params }: { params: Params }) {
  const { id } = await params;
  const r = await api.source(id);
  if (!r.ok && r.status === 404) notFound();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <Breadcrumbs items={[{ name: "Sources", href: routes.sources() }, { name: id, href: routes.source(id) }]} />
        <OfflineNotice detail={r.error} className="my-4" />
        <ErrorState />
      </Page>
    );
  }
  const s = r.data;
  const ref: SourceRef = { id: s.id, name: s.name, domain: s.domain, kind: s.kind, url: s.url, license: s.license, attribution: s.attribution };
  const robots = s.robotsAllowed === true ? { tone: "ok" as const, label: "robots.txt allows" } : s.robotsAllowed === false ? { tone: "warn" as const, label: "robots.txt disallows (API endpoint — see notes)" } : { tone: "neutral" as const, label: "robots.txt not evaluated" };
  const entityRows = s.byEntityType.map((e) => ({ label: ENTITY_TYPE_LABEL[e.entityType] ?? humanise(e.entityType), value: e.count }));
  const pageRows = s.byPageType.map((p) => ({ label: humanise(p.pageType), value: p.count }));
  const nav = [
    { id: "licence", label: "Licence" },
    { id: "notes", label: "Notes", count: s.notes ? 1 : 0 },
    { id: "coverage", label: "Coverage", count: entityRows.length + pageRows.length },
    { id: "connector", label: "Connector" },
    { id: "facilities", label: "Facilities" },
  ];

  return (
    <Page>
      <Breadcrumbs items={[{ name: "Sources", href: routes.sources() }, { name: s.name, href: routes.source(s.id) }]} className="pt-3" />
      <JsonLd data={compactJsonLd({ "@context": "https://schema.org", "@type": "Organization", "@id": `${absoluteUrl(routes.source(s.id))}#org`, name: s.name, url: s.url ?? `https://${s.domain}`, description: s.attribution })} />

      <header className="flex flex-col gap-2 py-5 sm:py-7">
        <div className="label-caps">Source</div>
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[28px]">{s.name}</h1>
        <div className="flex flex-wrap items-center gap-2 text-[13px] text-ink-2">
          <Badge tone="outline">{SOURCE_KIND_LABEL[s.kind]}</Badge>
          <Badge tone={robots.tone} size="sm">
            {robots.label}
          </Badge>
          <span className="text-ink-4" aria-hidden>
            ·
          </span>
          <ExtLink href={`https://${s.domain}`}>{s.domain}</ExtLink>
          {s.url && (
            <>
              <span className="text-ink-4" aria-hidden>
                ·
              </span>
              <ExtLink href={s.url}>Licence / terms</ExtLink>
            </>
          )}
          <span className="figure text-[11.5px] text-ink-4" title="Authority rank used when values conflict (lower = higher authority)">
            priority {s.priority}
          </span>
        </div>
      </header>

      <MetricRow cols={5}>
        <MetricCell>
          <Metric value={fmtInt(s.documents)} label="Documents" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(s.provenanceRows)} label="Provenance rows" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(s.facilities)} label="Facilities backed" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtDate(s.lastDocumentAt)} label="Last document" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtDate(s.updatedAt)} label="Registry updated" size="sm" />
        </MetricCell>
      </MetricRow>

      <SectionNav items={nav} className="mt-4" />

      <div className="mt-6 flex flex-col gap-8">
        <Section id="licence" className="scroll-mt-28" title="Licence & attribution" description="Recorded per source; the attribution line is shown on every page that uses a value from this source.">
          <KeyValueList
            items={[
              { label: "Licence", value: s.license ?? <span className="text-ink-3">Not recorded — facts only are extracted; the source&rsquo;s own terms apply.</span>, keepEmpty: true },
              { label: "Attribution", value: s.attribution ?? <span className="text-ink-3">{`Source: ${s.name}`}</span>, keepEmpty: true },
              { label: "Terms URL", value: s.url ? <ExtLink href={s.url} /> : null },
            ]}
          />
        </Section>

        {s.notes && (
          <Section id="notes" className="scroll-mt-28" title="Notes" description="Quirks recorded by the connector author (access method, limits, robots exceptions).">
            <p className="max-w-3xl whitespace-pre-line text-[13.5px] leading-relaxed text-ink-2">{s.notes}</p>
          </Section>
        )}

        {(entityRows.length > 0 || pageRows.length > 0) && (
          <Section id="coverage" className="scroll-mt-28" title="Coverage" description="Current provenance rows by entity type, and archived documents by page type.">
            <div className="grid gap-6 md:grid-cols-2">
              {entityRows.length > 0 && (
                <div>
                  <div className="label-caps mb-2">Provenance rows by entity</div>
                  <CoverageBars items={entityRows} />
                </div>
              )}
              {pageRows.length > 0 && (
                <div>
                  <div className="label-caps mb-2">Documents by page type</div>
                  <CoverageBars items={pageRows} />
                </div>
              )}
            </div>
          </Section>
        )}

        <Section id="connector" className="scroll-mt-28" title="Connector" description="How this source is read.">
          <KeyValueList
            items={[
              { label: "Connector id", value: <span className="figure">{s.connectorId}</span> },
              { label: "Kind", value: SOURCE_KIND_LABEL[s.kind] },
              { label: "robots.txt", value: robots.label },
              {
                label: "Pipeline",
                value: (
                  <Link href={`${routes.methodology()}#pipeline`} className="underline decoration-hair-2 hover:text-accent">
                    discover → fetch → archive → extract → normalize → reconcile → publish
                  </Link>
                ),
              },
            ]}
          />
        </Section>

        <Section id="facilities" className="scroll-mt-28" title="Facilities backed by this source" description={`${fmtInt(s.facilities)} facilities carry at least one current value observed here.`}>
          <p className="max-w-2xl text-[13px] text-ink-2">The public index does not filter facilities by source yet. Browse the facilities index — each facility page lists, field by field, which source backs which value, with first/last observation dates and a link to the page it was read from.</p>
          <div className="mt-3">
            <Button href={routes.datacenters()} size="sm">
              Browse facilities
            </Button>
          </div>
        </Section>
      </div>

      <SourcesFooter sources={[ref]} updatedAt={s.updatedAt} note="Licence and attribution are recorded per source and shown wherever its values appear." />
    </Page>
  );
}